<template>
  <view class="register-container">
    <view class="register-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">用户注册</text>
    </view>

    <view class="register-form">
      <view class="input-group">
        <input
          class="input"
          type="text"
          placeholder="请输入用户名"
          v-model="registerForm.username"
        />
      </view>

      <view class="input-group">
        <input
          class="input"
          type="password"
          placeholder="请输入密码"
          v-model="registerForm.password"
        />
      </view>

      <view class="input-group">
        <input
          class="input"
          type="password"
          placeholder="请确认密码"
          v-model="registerForm.confirmPassword"
        />
      </view>

      <view class="input-group">
        <input
          class="input"
          type="text"
          placeholder="请输入手机号"
          v-model="registerForm.phone"
        />
      </view>

      <button class="register-btn" @click="handleRegister">注册</button>

      <view class="login-link" @click="handleGoToLogin">
        <text>已有账号？立即登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const registerForm = ref({
      username: '',
      password: '',
      confirmPassword: '',
      phone: ''
    })

    const handleRegister = () => {
      // 验证表单
      if (!registerForm.value.username ||
        !registerForm.value.password ||
        !registerForm.value.confirmPassword ||
        !registerForm.value.phone) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }

      // 验证密码一致性
      if (registerForm.value.password !== registerForm.value.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return
      }

      // 模拟注册
      uni.showToast({
        title: '注册成功',
        icon: 'success'
      })

      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }, 1000)
    }

    const handleGoToLogin = () => {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }

    return {
      registerForm,
      handleRegister,
      handleGoToLogin
    }
  }
}
</script>

<style scoped>
.register-container {
  padding: 100rpx 50rpx 0;
  height: 100vh;
  background: linear-gradient(to bottom, #1296db, #f5f5f5);
}

.register-header {
  text-align: center;
  margin-bottom: 100rpx;
}

.logo {
  width: 150rpx;
  height: 150rpx;
  margin-bottom: 30rpx;
}

.title {
  font-size: 48rpx;
  color: white;
  font-weight: bold;
}

.register-form {
  background-color: white;
  border-radius: 20rpx;
  padding: 50rpx 30rpx;
}

.input-group {
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.input {
  height: 80rpx;
  font-size: 32rpx;
}

.register-btn {
  background-color: #1296db;
  color: white;
  border-radius: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  margin-bottom: 30rpx;
}

.login-link {
  text-align: center;
  color: #1296db;
}
</style>
